<template>
    <view class="container">
        <view class="item-container" v-for="(item, index) of listData" :key="index" @click="goLink(item)">
            <view class="image-wrapper">
                <image class="community-icon"
                    src="https://www.wantongkonggu.cn/crmebimage/profile/upload/2025/04/10/xiaoqu1_20250410154558A017.jpg">
                </image>
            </view>
            <view class="info-wrapper">
                <view class="community-title">
                    {{ (item.ebComunityName || '') +
                        (item.ebComunityLdName || '') +
                        (item.ebComunityDyName || '') +
                        (item.ebComunityLayerName || '') + '层' +
                        (item.houseNum || '') }}
                </view>
                <view class="community-name">
                    {{ item.ebComunityName }}
                </view>
                <!-- <view class="address-info">
                    <image
                        style="width: 24rpx; height: 24rpx;"
                        class="address-icon"
                        :src="require('@/static/tempIcon/address.png')"></image>
                    上海市青浦区嘉松中路6999号 756km
                </view> -->
            </view>
        </view>
        <view class="footer-spacer"></view>
        <view class="footer">
            <button class="add-house-button" @click="goAdd">
                新增房产
            </button>
        </view>
    </view>
</template>

<script>
import { userHouseList } from '../.././../utils/api/local.js';
export default {
    data() {
        return {
            listData: []
        }
    },
    onShow(option) {
        this.userHouseList()
    },
    methods: {
        /** 新增房产 */
        goAdd() {
            uni.navigateTo({
                url: '/pages_h5/wy/index_list/add_house'
            })
        },
        goLink(data) {
            uni.navigateTo({
                url: `/pages_h5/wy/index_list/bill?houseId=${data.id}`
            })
        },
        userHouseList() {
            userHouseList({
                userId: uni.getStorageSync("uid"),
            }).then((res) => {
                this.listData = res.data || [];
            })
        }
    }
}
</script>

<style>
.container {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20rpx;
}

.item-container {
    display: flex;
    align-items: center;
    background-color: #fff;
    border-radius: 20rpx;
    padding: 20rpx;
    margin-bottom: 20rpx;
    width: 100%;
    box-sizing: border-box;
}

.image-wrapper {
    flex-shrink: 0;
}

.community-icon {
    width: 120rpx;
    height: 120rpx;
    border-radius: 20rpx;
}

.info-wrapper {
    margin-left: 20rpx;
    max-width: calc(100% - 150rpx);
    flex-grow: 1;
}

.community-title {
    margin-bottom: 20rpx;
    color: #333;
    font-size: 30rpx;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
}

.community-name {
    margin-bottom: 10rpx;
    color: #999;
    font-size: 24rpx;
}

.footer-spacer {
    height: 140rpx;
}

.footer {
    position: fixed;
    bottom: 20rpx;
    width: 100%;
    background-color: #fff;
    padding: 20rpx;
    box-sizing: border-box;
    border-top: 1rpx solid #ddd;
}

.add-house-button {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 90rpx;
    background: linear-gradient(90deg, #ff5e0b 0%, #ff7c02 100%);
    border-radius: 50rpx;
    font-weight: 600;
    font-size: 32rpx;
    color: #ffffff;
}
</style>
